import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';

import {
    Button,
    DatePicker,
    Form,
    Input,
    Modal,
    Radio,
    Tag,
    Select,
    InputNumber,
    message,
    Row,
    Col,
    Tree
} from 'antd';
import { modalLayoutLg, modalLayoutSm } from '@/config/layout';
import { request } from 'umi';
const GroupUserTreeSelect = (props: any, refs: any) => {
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [treedata, settreedata] = useState([])
    const [checkedKeys, setcheckedKeys] = useState([]);
    const [checkedUsers, setcheckedUsers] = useState([]);
    //显示弹窗
    const showModal = () => {
        setIsModalVisible(true);
    };

    const getData = () => {
        request('/sys/account/findOfficeTreeList', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            data: {

            },
        }).then((res) => {
            console.log(res);
            let list = res?.data || [];
            list.map((e, i) => {
                list[i]['checkable'] = false;
            })
            settreedata(list)
        })
    }
    //取消
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    //确定
    const handleOk = () => {
        console.log(checkedUsers);
        if (checkedUsers.length == 0) {
            message.error('必须选择一个')
            return;
        }
        props.onOk(checkedUsers)
        handleCancel();
    };

    useImperativeHandle(refs, () => ({
        init: (initcheckedUsers = []) => {
            let initcheckedKeys = initcheckedUsers.map(item => item?.id);
            getData();
            setcheckedKeys(initcheckedKeys)
            setcheckedUsers(initcheckedUsers);
            showModal();
            // setfileList([]);
        },
    }));
    const onCheck = (checkedKeysN: any, e) => {
        console.log(e.checkedNodes);
        setcheckedUsers(e.checkedNodes);
        setcheckedKeys(checkedKeysN);
    }
    return (
        <Modal
            title={'选择人员'}
            visible={isModalVisible}
            onOk={handleOk}
            onCancel={handleCancel}
            centered
            width={1000}
            maskClosable={false}
            bodyStyle={{
                maxHeight: window.innerHeight - 150,
                overflowY: 'auto',
            }}
        >
            <Tree
                checkable
                fieldNames={{
                    title: 'name',
                    key: 'id',
                    children: 'childrens'
                }}
                onCheck={onCheck}
                checkedKeys={checkedKeys}
                treeData={treedata}
            />
        </Modal>
    );
};
const GroupUserTreeSelectCom = forwardRef(GroupUserTreeSelect);

export default GroupUserTreeSelectCom;
